<template>
  <div class="today-box">
    <!-- ------------------------日历------------------------ -->
    <div class="calendar-box">
      <div class="select-box">
        <!-- 选择月 -->
        <el-date-picker
          v-model="dateValue"
          type="month"
          :clearable="false"
          format="yyyy年MM月"
          prefix-icon="el-icon-caret-bottom"
        ></el-date-picker>
        <!-- 选择前后月份 -->
        <div class="selectMonth">
          <!-- <i class="el-icon-arrow-left" @click="getPrevMonth"></i>
          <i class="el-icon-arrow-right" @click="getNextMonth"></i> -->
          <!-- 全部 -->

          <el-button
            class="allBtn"
            size="mini"
            round
            :class="isAllData == 0 ? 'isActive' : ''"
            @click="changeType(true)"
            >我负责的</el-button
          >
          <el-button
            class="allBtn"
            size="mini"
            round
            :class="isAllData == 1 ? 'isActive' : ''"
            @click="changeType(false)"
            >我参与的</el-button
          >

          <!-- 参与 -->
        </div>
      </div>
      <!-- 日历 -->
      <el-calendar
        v-model="dateValue"
        :range="weekStartTime ? [weekStartTime, weekEndTime] : []"
      >
         <template  slot="dateCell" slot-scope="{ data }">
                <div
                :class="data.isSelected ? 'is-selected' : ''"
            ><span>{{ data.day.split('-')[2] }}</span></div>
           </template>
      </el-calendar>
      <!-- 展开收起箭头 -->
      <svg-icon
        icon-class="shouqi_icon"
        class="sq_arr"
        :class="weekStartTime ? '' : 'zk_arr'"
        @click="packOrUnfold"
      />
    </div>
    <!-- ------------------------日历------------------------end -->

    <!-- ------------------------任务列表------------------------ -->
    <div class="task_content" ref="taskContent">
      <!-- 我的列表 -->
      <div class="flex" v-if='isAllData==0'>
        <!-- 当前时间条 -->
        <div :style="{ top: currentHeight }">
          <div></div>
          <div class="right_line"></div>
        </div>
        <!-- 左侧时间节点 -->
        <div class="left">
          <div v-for="(item, index) in timeList" :key="index">
            <div :class="item.highlight ? 'color_F45' : ''">
              {{ item.value }}:00
            </div>
            <div class="current_time">
              {{ item.currentShow && !item.highlight ? currentTime : "" }}
            </div>
          </div>
        </div>
        <!-- 内容列表 -->
        <div class="right">
          <!-- 点击的区域和弹出的区域 -->
          <div v-for="(item, index) in taskList" :key="item.id">
            <el-popover
              placement="right-end"
              width="320"
              trigger="manual"
              :value="popCardIndex == index"
              :visible-arrow="false"
              popper-class="knownCard"
              :ref="`taskCard${index}`"
              @show="showPopover(index)"
            >
              <!-- 弹出的卡片 closeCard关闭卡片的回调 againPlace重新计算位置-->
              <KnownCard
                :cardData="item"
                :dateValue="getDate()"
                :ref="`knownCard${index}`"
                @refreshList="refreshList"
                @closeCard="closeCard(index)"
                @againPlace="againPlace(index)"
              ></KnownCard>

              <!-- 点击的区域 -->
              <div
                slot="reference"
                class="right_item font_26"
                :class="getTaskClass(index, item)"
                :style="{ height: getTaskHeight(item), top: getTop(item) }"
                v-show="index != longIndex"
                @mousedown="taskMousedown(index)"
                @mouseup="taskMouseup(index)"
              >
                <div>{{ item.name }}</div>
                <p class="font_12">{{ item.startTime }}~{{ item.endTime }}</p>
              </div>
            </el-popover>
          </div>

          <!-- 分割线 -->
          <div
            v-for="(item, index) in timeList"
            :key="index"
            @mousedown="addLine(item)"
          >
            <div class="right_line" :class="index == 0 ? 'first_top' : ''">
              <div v-if="item.status" class="line flex flex_ac"></div>
            </div>
            <div
              v-show="index < timeList.length - 1"
              class="right_current flex flex_ac"
            >
              <div
                class="current_line"
                v-show="item.currentShow && !item.highlight"
              >
                <div class="left_around"></div>
              </div>
            </div>
          </div>

          <!-- 添加的盒子 -->
          <div
            class="add-box"
            :style="{ top: addTopHeight, height: addHeight }"
            v-show="addStatus == 1"
            @click="getAddMouseUp($event)"
            @mousemove.stop.prevent="moveAddBox"
            @mousedown.stop.prevent="mousedown"
            @mouseup="mouseup"
            @mouseleave="mouseup"
          >
            <p>添加任务</p>
            <!-- <p class="isTime">{{ addTime }}</p> -->
            <p class="isTime">{{ startTime }} ~ {{ endTime }}</p>
          </div>
            <!-- 长按任务盒子 -->
        <div v-show="addStatus == 2" class="add_box right_item font_30 coloc_333 editBox"   @click.stop=""
          :style="{top:addTopHeight,height:addHeight,backgroundColor:`rgba(${editTaskBox.color})`}" 
           @mousemove.stop.prevent="moveAddBox"
            @mousedown.stop.prevent="mousedown"
            @mouseup="mouseup"
            @mouseleave="mouseup"
          >

          <div class=" font_26 color_486 ">{{editTaskBox.name }}</div>
          <span class="color_878 font_12">{{startTime }}~{{endTime}}</span>
          <div class="editBox_top border"></div>
          <div class="editBox_bottom border"></div>
        </div>
        </div>
      
      </div>
      <!--我参与的列表  -->
      <div class="taskList" v-if='isAllData==1'>
          <ul v-if="taskList.length">
              <!-- 任务 -->
              <li v-for="(task,index) in taskList" :key="index" :class="getTaskClass1(task,index)">
                  <el-popover placement="right-end" width="320" trigger="click" :visible-arrow="false" popper-class="knownCard" :ref="`taskCard${index}`" @show="showPopover(index)">
                      <!-- 弹出的卡片 -->
                      <KnownCard :cardData="task" :ref="`knownCard${index}`" @refreshList="refreshList" @closeCard="closeCard(index)" @againPlace="againPlace(index)"></KnownCard>

                      <!-- 点击的区域 -->
                      <div class="item-box" slot="reference">
                          <!-- <svg-icon icon-class="taskL" /> -->
                          <div class="item-right">
                              <!-- 标题 -->
                              <div class="item-title">
                                  <h3>{{task.name}}</h3>
                                  <!-- <i class="el-icon-arrow-right"></i> -->
                                  <div class="actor">
                                      <el-popover placement="bottom" width="50" trigger="hover" popper-class="tableFn-btn">
                                          <div class="popover-btn">
                                              <el-button @click="editDisplay(task,index)">{{isShow(task) ? '显示':'隐藏'}}</el-button>
                                              <!-- <el-button @click="editStatus(task,index)">完成</el-button>
                                              <el-button @click="editStatus(task,index)">取消</el-button> -->
                                          </div>
                                          <p class="edit_more" slot="reference">
                                              <i class="el-icon-more"></i>
                                          </p>
                                      </el-popover>
                                  </div>
                              </div>
                              <!-- 时间 -->
                              <div class="item-time">
                                  <span class="name">目标：{{task.targetName}}&nbsp;&nbsp;&nbsp; 参与者：{{getUserListName(task)}}</span>
                                  <!-- <div> -->
                                      
                                      <!-- <svg-icon icon-class="person_icon" v-if="getUserListNum(task)"/>
                                      <svg-icon icon-class="persons_icon" v-else/> -->
                                  <!-- </div> -->
                              </div>
                          </div>
                      </div>
                  </el-popover>
                    <!-- 已完成和已取消显示的图标 -->
                 <div class="okOrCancel" v-if="getTaskIcon(task)">
                    <!-- 已完成 -->
                    <svg-icon class="isOkOrCancel" icon-class="isOk"  v-if="getTaskOkIcon(task)"/>
                    <!-- 已取消 -->
                    <svg-icon class="isOkOrCancel" icon-class="isCancel" v-else-if="getTaskCancelIcon(task)"/>
                 </div>
              </li>
          </ul>
           <!-- 无数据 -->
          <div class="noData-box" v-else>
              <img src="~@/assets/images/wjg_img@2x.png" alt="">
              <p>暂无数据</p>
          </div>
      </div>
      <!-- 底部任务数量 {{ getFinishNum() }}/ -->
      <el-button class="taskNum"
        >任务总数({{ taskList.length }})</el-button
      >
    </div>
    <!-- ------------------------任务列表------------------------end -->

    <!-- 添加任务的抽屉弹出框  @close="addTaskClose"  -->
    <el-drawer
      title="创建任务"
      size="40%"
      :visible.sync="addTaskDrawer"
      class="addTaskClass"
      @close="addDraClose"
    >
      <!-- 创建任务 :selectObj="selectObj" -->
      <AddTask
        :isTaskAdd="true"
        :editObj="addObj"
        @reqOrClose="reqOrClose"
        @drawerBottom="drawerBottom"
      ></AddTask>
    </el-drawer>
  </div>
</template>

<script>
import KnownCard from "./knownCard.vue";
import AddTask from "./addTask.vue";
import { transferTime, timestampToTime } from "@/wss/utils/wss.js";
import { getServiceActionTaskListApi,editServiceTimeApi,taskDisplayApi } from "@/BMViews/api/service/actionTask.js";
import { debounce } from '../../../../../wss/utils/wss';
export default {
  name: "today",
  components: { KnownCard, AddTask },
  data() {
    return {
      // ----------日历---------
      dateValue: new Date(), //当前日期
      weekStartTime: "", //当前选择这周第一天
      weekEndTime: "", //当前选择这周最后一天
      // ----------日历---------end

      // ----------任务列表---------
      timeList: [], //时间列表
      taskList: [], //任务列表
      currentTime: "", //当前时间
      currentHeight: "",
      popCardIndex:-1,//弹出卡片的索引值
      timer:'',//判断点击事件还是长按事件
      popCard:false,//是否弹出卡片
      editTaskBox:{},//长按修改任务的虚拟盒子
      addStatus:0,//用于判断展示创建任务还是拖拽任务盒子
      longIndex:-1,//当前选中的拖拽任务



      addTime: "", //添加的时间
      startTime: "", //创建任务开始时间
      endTime: "", //创建任务结束时间
      addTopHeight: 0, //添加的离上面的距离
      addHeight: "48px", //高度
      oldHeight: 0, //记录滚动上一步盒子的高度，便于计算滚动距离
      baseY: 0, //初始触摸点Y值
      defaultH: 0, //滚动初始盒子高度
      defaultT: 0, //初始滚动盒子top
      addObj: {}, //当前添加的时间段

      // 创建任务的数据
      addTaskDrawer: false, //抽屉显示隐藏
      // ----------任务列表---------end
      isAllData: 0, //控制‘我的’和‘参与’按钮的高亮
      moveAdd: false, //判断鼠标点击
    };
  },
  created() {
    // -------------------日历-------------------
    this.getWeekStartEnd(); // 获取选择这周的第一天和最后一天
    // -------------------日历-------------------end

    // -------------------任务列表-------------------
    // 时间节点设置
    for (let i = 0; i < 25; i++) {
      let value = i;
      let status = true;
      if (i < 10) {
        value = "0" + i;
      }
      this.taskList.forEach((item) => {
        if (i >= item.starTime && item.endTime >= i) {
          status = false;
        }
      });
      let data = {
        value,
        status,
        currentShow: false, //时间线显示
        highlight: false, //时间点高亮
      };
      this.timeList.push(data);
    }

    this.taskList.forEach((item) => {
      item.height = this.getTaskHeight(item);
    });
    this.getCurrentTime(); // 获取当前时间
    // -------------------任务列表-------------------end
  },
  mounted() {
    this.$refs.taskContent.addEventListener("scroll", this.handleScroll); //监听滚动

    this.getServiceActionTaskList(); // 获取当前任务列表
    // 通过$bus刷新列表
    this.$bus.$on("refLeftList", (res) => {
      this.getServiceActionTaskList(res); // 获取当前任务列表
    });
  },
  beforeDestroy() {
    //销毁
    this.$refs.taskContent.removeEventListener("scroll", this.handleScroll);
    this.$bus.$off("refLeftList");
  },
  watch: {
    // 监听选择时间的变化
    dateValue() {
      this.getWeekStartEnd(); // 获取选择这周的第一天和最后一天
      this.getServiceActionTaskList(); // 获取当前任务列表
    },
  },
  methods: {
    // 修改当前任务隐藏
   async editDisplay(...arg){
      // console.log(arg,'增加');     
      let id = this.$store.state.user.userId
      let index = arg[0].userList.findIndex(item=>{
          return item.userId == id
      })  
      let argument = {
        id:arg[0].id,
        display:!arg[0].userList[index].display
      }
      const res = await taskDisplayApi(argument)
        if(res.code==200){
            this.$message({message: res.msg, type: 'success'});
             if(this.isShow(arg[0])){
                  // 如果是显示操作，手动改为true
                  this.taskList[arg[1]].userList[index].display = true
              }else{
                  // 隐藏操作，剔除掉改item
                      this.taskList.splice(arg[1],1)
              }
         
         }
    },
    // 当前选中的时间
    getDate(){
        return transferTime(this.dateValue)
    },

    // 不同类型获取的class背景不同
    getTaskClass1(item,index){
      // 不同类型获取的class背景不同
      const stateMap = {
          1: "career1",
          2: "friend1",
          0: "health1",
      };
      // 判断状态 已完成和已取消
      let status = ''
      if(item.repeatDays=='-1'){
        status = item.status
      }else{
        status = item.todayStatus
      }
      if(status=='2'||status=='-1'){
          return stateMap[index % 3] + " " + "isLight"
      }else{
          return stateMap[index % 3]
      }
    },

    // 不重复和重复显示和隐藏图标
    getTaskIcon(item){
      if(item.repeatDays=='-1'){
        // 不重复
        return item.status=='2' || item.status=='-1'
      }else{
        // 重复
        return item.todayStatus=='2' || item.todayStatus=='-1'
      }
    },
    
    // 获取已完成的显示图标
    getTaskOkIcon(item){
      if(item.repeatDays=='-1'){
        // 不重复
        return item.status=='2'
      }else{
        // 重复
        return item.todayStatus=='2'
      }
    },
    
    // 获取已取消的显示图标
    getTaskCancelIcon(item){
      if(item.repeatDays=='-1'){
        // 不重复
        return item.status=='-1'
      }else{
        // 重复
        return item.todayStatus=='-1'
      }
    },
    
    // 获取参与者
    getUserListName(row){
        let userName = []
        row.userList.forEach(item => {
            // 过滤出已接受的
            // if(item.status=='0'){
                // 如果是自己就只显示我就行
                if(item.userId == this.$store.state.user.userId){
                    userName.push('我')
                }else{
                    userName.push(item.name)
                }
            // }
        });
        // if(userName.length>1){
        //     return '多人'
        // }else{
            return userName.join(',')
        // }
    },   
    // ---------------------------------日历------------------------
    // 获取选择这周的第一天和最后一天
    getWeekStartEnd() {
      let date = this.dateValue;
      //本周第一天
      let weekStartTime = new Date(
        new Date(date).getTime() -
          3600 *
            1000 *
            24 *
            (new Date(date).getDay() == 0 ? 6 : new Date(date).getDay() - 1)
      );
      //本周最后一天
      let weekEndTime = new Date(
        new Date(date).getTime() +
          3600 *
            1000 *
            24 *
            (new Date(date).getDay() == 0 ? 0 : 7 - new Date(date).getDay(date))
      );
      this.weekStartTime = transferTime(weekStartTime); //本周第一天
      this.weekEndTime = transferTime(weekEndTime); //本周最后一天
    },

    // 获取上一个月
    getPrevMonth() {
      let nextMonth = this.dateValue;
      let y = nextMonth.getFullYear();
      let m = nextMonth.getMonth();
      let res = new Date(y, m, 0); //上个月0最后一天
      this.dateValue = res;
    },

    // 获取下一个月
    getNextMonth() {
      let nextMonth = this.dateValue;
      let y = nextMonth.getFullYear();
      let m = nextMonth.getMonth() + 1;
      let res = new Date(y, m, 1); //下个月1第一天
      this.dateValue = res;
    },

    // 点击收起展开按钮
    packOrUnfold() {
      if (this.weekStartTime == "" || this.weekEndTime == "") {
        this.getWeekStartEnd(); // 获取选择这周的第一天和最后一天
      } else {
        this.weekStartTime = ""; //清空选择本周第一天
        this.weekEndTime = ""; //清空选择本周最后一天
      }
    },
    // ---------------------------------日历------------------------end

    // ---------------------------------任务列表------------------------
    // 关闭卡片的回调
    closeCard(index) {
      this.$refs[`taskCard${index}`][0].doClose(); //关闭
    },

    // 重新计算位置
    againPlace(index) {
      this.$refs[`taskCard${index}`][0].updatePopper(); //重新计算位置
    },

    // 不同类型获取的class背景不同
    getTaskClass(index, item) {
      // 获取高度，如果高度小于20就要一行显示
      let divH = this.getTaskHeight(item);

      // 不同类型获取的class背景不同
      const stateMap = {
        1: "career",
        2: "friend",
        0: "health",
      };
      if (Number(divH.slice(0, divH.length - 2)) < 40) {
        return `${stateMap[index % 3]} isArow`;
      } else {
        return stateMap[index % 3];
      }
    },

    // 获取当前任务列表
    async getServiceActionTaskList(res) {
      let taskDay = transferTime(this.dateValue)
      let data = {
        taskDay, //当前选择的时间
        going: true,
      };
      if (this.isAllData == 0) {
        data.principal = true;
      } else {
        data.participate = true;
      }
    if(res){
        data.display  = true
        data.searchText = res
    }
      let result = await getServiceActionTaskListApi(data);
      if (result.code == 200) {
        console.log(result, "获取当前任务列表获取当前任务列表");
        // this.taskList = result.rows;
        this.taskFilter(taskDay,result.rows) 
      }
    },
// 过滤任务显示
			taskFilter(...arg){
				let time = arg[0] + ' 00:00' //改为当天零点时间戳便于比较
				let date = new Date(time)
				let week = date.getDay()
				let taskList = []
				arg[1].forEach(item=>{
					if(item.repeatDays == 9){
        
						// 每天重复
						taskList.push(item)
                console.log(taskList,'每天重复添加');
					}else if(item.repeatDays == -1){
						// 判断当前时间在不在任务时间之间
						if(item.endDay >= date.valueOf() && item.startDay <= date.valueOf()){
							taskList.push(item)
						}
					}else if(item.repeatDays == 0 && week != 6 && week != 0){
						// 工作日重复
						taskList.push(item)
					}else {
						// 每周重复
					    week = week == 0 ? 7 : week
							let index = item.repeatDays.indexOf(week)
							// console.log(index,'每周重复索引值');
							if(index != -1){
								taskList.push(item)
							}
					}
				})
				this.taskList  = taskList
				// console.log(week,'--123');
				// console.log(arg,'------------进来了');
			},
    // 刷新当前任务列表
    refreshList() {
      this.getServiceActionTaskList(); // 获取当前任务列表
    },

    // 获取任务详情
    showPopover(index) {
      // console.log(this.$refs[`knownCard${index}`][0],'llllllllllllllllllll');
      this.$refs[`knownCard${index}`][0].getInfoServiceActionTask(); // 获取当前点击的这个任务的详细数据
    },

    // 计算任务高度和所在位置
    getTaskHeight(e) {
      // let reg = new RegExp(":00","g")
      // let endT = e.endTime.toString().replace(reg,"")
      // console.log(endT,'正则判断的时间');
      // let starT = e.startTime.toString().replace(reg,"")
      // let base = Number(endT - starT);

      // 增加分钟节点高度

      let base =
        Number(e.endTime.split(":")[0]) - Number(e.startTime.split(":")[0]);
      let min =
        (Number(e.endTime.split(":")[1]) - Number(e.startTime.split(":")[1])) /
        60;
      return (base + min) * 48 + "px";
    },

    // 计算所在起始位置
    getTop(e) {
      // let reg = new RegExp(":00","g")
      // let starT = e.startTime.toString().replace(reg,"")
      let min = Number(e.startTime.split(":")[1]) / 60;
      return (Number(e.startTime.split(":")[0]) + min) * 48 + 7 + "px";
    },

    // 获取当前时间
    getCurrentTime(e) {
      let date = new Date();
      let hours =
        date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
      let minute =
        date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
      let second = date.getSeconds();

      this.currentTime = hours + ":" + minute;
      if (!this.timeList[Number(hours)].currentShow) {
        this.timeList.forEach((item, index) => {
          index == Number(hours)
            ? (item.currentShow = true)
            : (item.currentShow = false);
        });
        // this.timeList[Number(hours)].currentShow = true;
      }

      if (minute == "00") {
        this.timeList[Number(hours)].highlight = true;
      } else {
        this.timeList[Number(hours)].highlight = false;
      }
      if (e) {
        this.getTime(e);
      } else {
        this.getTime(60 - second);
      }

      // 滚动到当前时间的位置
      this.$nextTick(() => {
        var container = this.$el.querySelector(".task_content");
        container.scrollTop = (34 + 14) * (hours - 1);
      });
    },

    //获取时间定时器
    getTime(e) {
      let time = Number(e) * 1000;
      setTimeout(() => {
        this.getCurrentTime(60);
      }, time);
    },

    // 获取时间格式
    formatTime(e) {
      let time;
      if (Number(e) < 10) {
        time = "0" + e + ":00";
      } else {
        time = e + ":00";
      }
      return time;
    },

    // 监听滚动
    handleScroll() {
      if (!this.weekStartTime) {
        this.getWeekStartEnd(); // 获取选择这周的第一天和最后一天
      }
    },

    // 获取已完成的数量
    getFinishNum() {
      let num = 0;
      this.taskList.forEach((item) => {
        if (item.todayStatus == 2) {
          num = num + 1;
        }
      });
      return num;
    },
    // ---------------------------------任务列表------------------------end

    // --------------------------点击添加任务处理---------------------
    // 点击时间线添加
    addLine(item) {
      if(this.longIndex != -1){//隐藏拖拽任务盒子，初始化
       this.longIndex = -1 
        this.addStatus = 0
        console.log(this.endTime,'结束时间');
         this.editTaskApi() //编辑任务
         return 
      } 
      let time = transferTime(this.dateValue);
      let now = new Date(time).getTime();
      // this.taskList
      let data = {
        startDay: now,
        endDay: now,
        startTime: item.value + ":00",
        endTime:
          item.value >= 10
            ? Number(item.value) + 1 + ":00"
            : "0" + (Number(item.value) + 1) + ":00",
      };
      this.addObj = data; //当前添加的时间对象
      this.addTime = item.value + ":00-" + (Number(item.value) + 1) + ":00"; // 设置添加的时间
      this.startTime = item.value + ":00";
      this.endTime = Number(item.value) + 1 + ":00";

      this.addHeight = "48px";
      // 初始化创建任务盒子top距离
       let container = this.$el.querySelector(".add-box");
     
      this.offsetTop = container.offsetTop;
      // 计算距离顶部的高度
      this.addTopHeight = (34 + 14) * Number(item.value) + 7 + "px";
    
      this.addStatus = 1
    
      this.$forceUpdate(); //刷新视图
    },
    // ---------------------------------拖拽函数-------------------------------
                                                                                                                     
    //长按已有任务弹出拖拽盒子
    taskMousedown(e){  
    this.timer = setTimeout(() => {
         	this.longIndex =e
         this.editTask(e)
      }, 1000);
    },
    // 点击已有任务鼠标抬起
    taskMouseup(e){
      if(	this.longIndex == -1){ // 判断为单击事件
        this.popCardIndex =e
        clearTimeout(this.timer)
      }else{
        this.editTask(e)
        this.timer = '' 
      }
    },
    // 长按任务显示任务弹框
			editTask(arg) {
        // if(this.longIndex == arg)return
				this.addStatus = 2		 //显示拖拽盒子
				this.editTaskBox = this.taskList[arg] //拖拽任务的信息
				this.addHeight = this.getTaskHeight(this.taskList[arg]) 
				this.addTopHeight = this.getTop(this.taskList[arg])
				this.startTime = this.taskList[arg].startTime
				this.endTime = this.taskList[arg].endTime
      
				// setTimeout(() => { //获取初试盒子的top值,立刻获取是空值，加延时
        //  let container = this.$el.querySelector(".add-box");
        //  console.log();
				// 	const query = uni.createSelectorQuery()
				// 	query.select('.add_box').boundingClientRect(data => {
				// 		this.offsetTop = data.top
				// 	}).exec();
				// }, 500)
			},
    // 点击时间线 鼠标抬起
    getAddMouseUp(e) {
      // console.log(this.moveAdd, "单击事件");
      if (this.moveAdd) return;
      this.addTaskDrawer = true; // 打开创建任务的抽屉
    },
    // ----鼠标拖动添加任务盒子
    moveAddBox(e) {

      if (!this.moveAdd) return; //鼠标长按下拖动才可以拖拽

      // console.log(this.addTopHeight); // 距离顶部X坐标
      let type = true;
      let boxH = e.pageY - this.baseY; //本次滚动距离触摸点的距离
     
      if (this.offsetTop  + 20 >= e.pageY) {
        //触摸位置与盒子顶部距离
        type = false;
      }
      console.log(this.offsetTop  + 20 >= e.pageY);
      console.log(e.pageY,'-----------');
      console.log(type,'拖拽类型');
      let addTop = parseInt(this.addTopHeight);

      let height = this.addTopHeight.split("p")[0];

      if (this.baseY == 0) {
        this.baseY = e.pageY;
      } else {
        let baseHeight = Number(this.addHeight.split("p")[0]);
        let baseTop = parseInt(this.addTopHeight);
        let rootHeight = 48;

        if (this.defaultH == 0 || this.defaultT == 0) {
          //判断是否为本次触摸点初始高度
          this.defaultH = baseHeight;
          this.defaultT = baseTop;
        }
        if (type) {
          //结束时间操作
          if (boxH + this.defaultH <= rootHeight / 2) return;
          let baseTime = (boxH + this.defaultH) / rootHeight;

          // 计算结束时间
          let hours = Number(this.startTime.split(":")[0]) + parseInt(baseTime);
          // 计算分钟,加减
          let second =
            (baseTime % 1) * 60 + Number(this.startTime.split(":")[1]);
          if (second > 60) {
            //结束分钟加上开始分钟是否高于60
            hours += 1;
          }
          second = parseInt(second % 60);
          second = second < 10 ? "0" + second : second;
          hours = hours < 10 ? "0" + hours : hours;
          if (hours >= 24) {
            this.endTime = "23:59";
            return;
          }

          // 高度赋值
          this.addHeight = boxH + this.defaultH + "px";
          this.endTime = hours + ":" + second;
        } else {
          //开始时间操作
          console.log("开始时间操作");
          let baseTime = (this.defaultH - boxH) / rootHeight;

          // 计算开始时间
          let hours =  Number(this.endTime.split(":")[0]) - parseInt(baseTime) - 1;

          if (this.defaultH - boxH <= rootHeight / 2) return;
          // 计算分钟,加减
          let second = 60 -  ((baseTime % 1) - Number(this.endTime.split(":")[1]) / 60) * 60;
          if (second > 60) {
            //结束分钟加上开始分钟是否高于60
            hours += 1;
          }
          if (Number(hours) < 0) {
            //顶部触顶0点0分，判断存在问题
            this.startTime = "00:00";
            return;
          }

          //盒子top赋值
          this.addTopHeight = boxH + this.defaultT + "px";
          // 高度赋值
          this.addHeight = this.defaultH - boxH + "px";
          second = parseInt(second % 60);
          second = second < 10 ? "0" + second : second;
          hours = hours < 10 ? "0" + hours : hours;

          this.startTime = hours + ":" + second;
        }
      }
    },
    // -------鼠标按下
    mousedown() {
      setTimeout(() => {
        this.moveAdd = true;
      
      }, 200);
    }, 
    // -----鼠标抬起 鼠标离开监控区域
    mouseup() {
       
      // 初始化触摸信息值
      this.baseY = 0;
      this.defaultH = 0;
      this.defaultT = 0;
      // const query = uni.createSelectorQuery()
      // query.select('.add-box').boundingClientRect(data => {
      // 	this.offsetTop = data.top
      // 	console.log(this.offsetTop, '触摸停止后的值');
      // }).exec();
      let container = this.$el.querySelector(".add-box");
      
      this.offsetTop = container.offsetTop;
      console.log(this.offsetTop,'最新的top值');
      setTimeout(() => {
        this.moveAdd = false;
      }, 200);
    },
    // 刷新列表并且关闭弹出框
    reqOrClose() {
      
      this.getServiceActionTaskList(); // 重新获取当前任务列表
      this.addTaskDrawer = false; //关闭弹出框
    },

    // 关闭抽屉的回调
    addDraClose() {
      this.addStatus = 0 //初试化，隐藏创建任务盒子
      this.addTopHeight = 0; //距离上面0 也就是隐藏掉添加的那个
    },

    // 弹出的抽屉滚动到底部
    drawerBottom() {
      this.$nextTick(() => {
        var container = this.$el.querySelector(
          ".addTaskClass .el-drawer__body"
        );
        container.scrollTop = container.scrollHeight;
      });
    },
    // -------拖拽修改任务接口
    editTaskApi:debounce(async function(){
         try {
          
          if(this.startTime == this.editTaskBox.startTime && this.endTime == this.editTaskBox.endTime){
            return
          }
        
            this.editTaskBox.startTime = this.startTime
            this.editTaskBox.endTime = this.endTime
           let argument = new FormData()
             argument.append('startTime',this.startTime) 
             argument.append('endTime',this.endTime) 
             argument.append('createBy', this.editTaskBox.createBy) 
             argument.append('targetId', this.editTaskBox.createBy) 
             argument.append('id', this.editTaskBox.id) 
          const res = await editServiceTimeApi(argument)
          if(res.code == 200){
                this.$message({
                message: "修改成功",
                type: "success",
              });
             this.getServiceActionTaskList(); // 获取当前任务列表
          }
         } catch (error) {
          
         }
    },300),
    // --------------------------点击添加任务处理---------------------end

    // -----------------------------点击切换展示任务类型---------------------
    changeType(e) {
      if (e) {
        this.isAllData = 0;
      } else {
        this.isAllData = 1;
        this.taskList = []
      }
      this.getServiceActionTaskList(); // 获取当前任务列表
    },
    // -------------------------------搜索功能
    // 搜索相关功能
    isShow(e){
      let id = this.$store.state.user.userId
      let index =   e.userList.findIndex(item=>{
            return item.userId == id
      })
        return  !e.userList[index].display ? true : false
    }
  },
};
</script>

<style>
</style>
<style lang="scss" scoped>
@import "../../common.css";
// ----------------------日历样式----------------------
.today-box {
  height: 100%;
}
.select-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}
.calendar-box {
  margin: 0 30px;
  background-color: #f7f7f7;
  border-radius: 8px;
  padding: 15px;
  overflow: hidden;
  .sq_arr {
    display: block;
    margin: 0 auto;
    font-size: 20px;
    cursor: pointer;
  }
  .zk_arr {
    transform: rotate(180deg);
  }
}
.selectMonth {
  // i {
  //   cursor: pointer;
  //   margin-left: 10px;
  //   font-size: 18px;
  // }
  .allBtn {
    padding: 4px 12px;
    background-color: transparent;
    &:hover{
        border-color: #DCDFE6;
        color: #606266;
    }
  
  }
  .isActive {
    border-color: #f87a23;
    color: #f87a23;
    &:hover{
        border-color: #f87a23;
        color: #f87a23;
    }
  }
}
.el-calendar {
  position: relative;
  background-color: #f7f7f7;
  ::v-deep .el-calendar__header {
    display: none;
  }
  ::v-deep .el-calendar__body {
    padding: 0px;
  }
  ::v-deep .el-calendar-table {
    thead {
      th {
        font-size: 12px;
      }
    }
    td {
      border: 0;
      &:hover {
        background-color: transparent;
      }
    }
    .el-calendar-day {
      height: auto;
      text-align: center;
      font-size: 12px;
      span {
        display: block;
        margin: 0 auto;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
      }
    }
    .is-selected {
      background-color: transparent;
      span {
        background-color: #f19b32;
        color: #fff;
        border-radius: 50%;
      }
    }
    .is-today {
      color: #f87a23;
    }
  }
}
// ----------------------日历样式----------------------end

// ------------列表------------
ul,li,p{
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 无数据 */
.noData-box{
    text-align: center;
    margin-top: 50px;
}
.noData-box img{
    width: 40%;
}
.noData-box>p{
    font-size: 12px;
    font-weight: 400;
    color: #858A91;
    margin-top: 30px;
}
.taskList{

    li{
       position: relative;
        margin: 0 30px;
        padding: 15px;
        border-radius: 12px;
        margin-bottom: 15px;
        border: 1px solid #efefef;
        // border-bottom: 1px solid #efefef;
        cursor: pointer;
        h3{
            font-size: 15px;
            color: #333;
        }
        .item-box{
            display: flex;
            svg{
                font-size: 20px;
                margin-right: 10px;
            }
            .item-right{
                // width: calc(100% - 32px);
                width: 100%;
            }
        }
        .item-title{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            .actor{
                width: 20px;
                display: flex;
                justify-content: flex-end;
                margin-left: auto;
                transform: rotate(90deg);
                cursor: pointer;
                 color: #999;
                font-size: 12px;
                  margin-bottom: 5px;
                
            }
            svg{
                font-size: 14px;
                margin-right: 5px;
            }
            h3{
                width: calc(100% - 20px);
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow:ellipsis;
            }
        }
      .item-time{
          // display: flex;
          // justify-content: space-between;
          font-size: 12px;
          color: #878585;
          margin-top: 5px;
          // border-bottom: 1px solid #efefef;
          // padding-bottom: 18px;
          .name{
              
            margin-top: 3px;
            display:inline-block;
            width: 100%;
            word-break: break-word; 
          //  line-height: 1.5;
          }
          // p{
          //     margin-right: 5px;
          // }
          svg{
              font-size: 14px;
          }
      }
      // 标识
      .okOrCancel{
        position: absolute;
        top: 14px;
        right: 40px;
      .isOkOrCancel{
          font-size: 45px;
      }
      }
      // ----------------------
    }
    // 事业 
    .career1{
      background-color: #F4EAC7;
      &::before{
        background-color: #F4EAC7;
      }
    }
    // 亲友
    .friend1{
      background-color: #A9BDC6;
      &::before{
        background-color: #A9BDC6;
      }
    }
    // 健康
    .health1{
      background-color: #BDCAAA;
      &::before{
        background-color: #BDCAAA;
      }
    }
    // 盖了章的颜色不同
        // 事业 已完成或者已取消的
    .career1.isLight {
      background-color: #FFFAEA;
      border-color: #FFFAEA!important;
      &::before {
        background-color: #FFFAEA;
      }
      .item-title{
        h3{
          color: #A9ADA0!important;  
        }
      }
      .item-time{
        .name{
          color: #A9ADA0!important;
        }
      }
    }
    
    // 亲友 已完成或者已取消的
    .friend1.isLight {
      background-color: #EAF9FF;
      border-color: #EAF9FF!important;
      &::before {
        background-color: #EAF9FF;
      }
      .item-title{
        h3{
          color: #A9ADA0!important;  
        }
      }
      .item-time{
        .name{
          color: #A9ADA0!important;
        }
      }
    }
    
    // 健康 已完成或者已取消的
    .health1.isLight {
      background-color: #F6FFE8;
      border-color: #F6FFE8!important;
      &::before {
        background-color: #F6FFE8;
      }
      .item-title{
        h3{
          color: #A9ADA0!important;  
        }
      }
      .item-time{
        .name{
          color: #A9ADA0!important;
        }
      }
    }
}
// 功能按钮
  .popover-btn {
    
    .el-button{
        width: 100%;
        padding: 6px 0px;
        margin: 0;
        border: 0;
        &:hover{
            color: #FA7C21;
            background-color: #FFF4EB;
        }
        &:focus{
            color: #FA7C21;
            background-color: #FFF4EB;
        }
    }
  }
// ---------

// 取消滚动条
.task_content::-webkit-scrollbar {
  width: 0;
}
//今天任务
.task_content {
  margin-top: 15px;
  height: calc(100% - 200px);
  overflow-y: scroll;
  > .flex {
    padding: 0 30px;
    margin-bottom: 50px;
  }

  .left {
    width: 53px;
    font-size: 12px;
    color: #999999;
    margin-right: 18px;

    div:first-child {
      line-height: 14px;
      text-indent: 1em;
    }

    div:last-child {
      margin-bottom: 0;
    }
    .current_time {
      height: 34px;
      text-align: center;
      line-height: 38px;
      color: #f87a23;
      font-size: 12px;
    }
  }

  .right {
    flex: 1;
    font-size: 0;
    position: relative;

    .right_item {
      position: relative;
      font-size: 14px;
      width: 100%;
      position: absolute;
      left: 0;
      // display: flex;
      background-color: #f4eac7;
      min-height: 20px;
      // border-left: 2px solid #e7966c;
      // padding: 8px 15px;
      padding: 4px 15px;
      box-sizing: border-box;
      cursor: pointer;
      // overflow: hidden;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: -70px;
        width: 4px;
        height: 100%;
        background-color: #e7966c;
      }
      p {
        color: #878585;
      }
      div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
    }
    .isArow {
      display: flex;
      align-items: center;
      padding: 0px 15px;
      div {
        margin-right: 5px;
      }
    }
    // 添加的
    .add-box {
      // display: none;
      position: absolute;
      left: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 3px;
      border: 1px solid #ffdaad;
      background-color: rgba(0, 0, 0, 0.1);
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: -70px;
        width: 4px;
        height: 100%;
        background-color: #ffdaad;
      }
      p {
        font-size: 14px;
        color: #666;
      }
      .isTime {
        font-size: 12px;
        margin-top: 2px;
      }
    }
    // 拖拽任务盒子
    .add_box {
      position: absolute;
      left: 0;
      width: 100%; 
      border: 1rpx solid #ffdaad;
      background-color: rgba(0, 0, 0, .1);
      font-size: 28rpx;
      z-index: 9;
      span{
        
        color: #666;
      }
      .add_task {
        flex: 1;
      }
     

		}
      // 拖拽任务盒子
      .editBox {
        z-index: 999;
    
        .border {
          position: absolute;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: rgba(0, 0, 0, 0.1);
          border: 1px solid #ffdaad;
        }

        .editBox_top {
          top: -8px;
          right: 30px;
        }

        .editBox_bottom {
          bottom: -8px;
          left: 30px;
        }
	  }
   
    // 事业
    .career {
      background-color: #f4eac7;
      &::before {
        background-color: #f4eac7;
      }
    }
    // 亲友
    .friend {
      background-color: #a9bdc6;
      &::before {
        background-color: #a9bdc6;
      }
    }
    // 健康
    .health {
      background-color: #bdcaaa;
      &::before {
        background-color: #bdcaaa;
      }
    }

    .right_line {
      width: 100%;
      height: 14px;
      border-left: 1px solid #ebeef5;
      display: flex;
      align-items: center;
      .line {
        flex: 1;
        height: 1px;
        background: #ebeef5;
      }
    }
    .right_current {
      width: 100%;
      height: 34px;
      border-left: 1px solid #ebeef5;
      .current_line {
        position: relative;
        width: 100%;
        height: 1px;
        background-color: #f87a23;

        .left_around {
          position: absolute;
          top: -3px;
          left: -3px;
          width: 6px;
          height: 6px;
          background: #f87a23;
          border-radius: 50%;
        }
      }
    }
  }
}

// 底部任务数量
.taskNum {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f8f8f8;
  border: 0;
  border-top: 1px solid #ecedf0;
  padding: 15px;
  cursor:default;
   &:hover{
            color: #FA7C21;
          
        }
    &:focus{
          color: #FA7C21;
   
    }
}

/* 抽屉样式 */
::v-deep .el-drawer__header {
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
::v-deep .el-drawer__header > span {
  font-size: 18px;
  font-weight: 400;
  color: #2e3f5e;
  padding-left: 20px;
  background: url("~@/wss/assets/image/icon/cardLeft.png") left center no-repeat;
  background-size: 7px;
}
</style>
<style scoped>
/* 选择日期样式 */
.calendar-box .el-date-editor.el-input {
  width: 120px;
}
.calendar-box >>> .el-input__inner {
  border: 0;
  padding-left: 0;
  /* font-weight: bold; */
  color: #333;
  background-color: transparent;
  height: 20px;
  line-height: 20px;
}
.calendar-box >>> .el-input__prefix {
  width: 25px;
  left: auto;
  right: 15px;
  top: -10px;
  color: #333;
}
</style>
<style>
/* 卡片样式 */
.knownCard {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  /* z-index: 2020!important; */
}
</style>
